<template>
  <div class="play">
    <nav>
      <p class="p-left">
        <i class="fa fa-search"></i>
      </p>
      <p class="p-center">推荐</p>
      <p class="p-right">
        <router-link :to="{ name: 'Fatie' }">发帖子</router-link>
      </p>
    </nav>
    <div class="conten">
      <p class="c-p1"><span></span>你可能感兴趣的圈圈</p>
      <p class="c-p2">
        <a href="">全部<i class="fa fa-angle-right"></i> </a>
      </p>
    </div>
    <div class="box">
      <div class="b-box">
        <img
          src="../img/1.jpg"
          alt=""
        />
        <div>
          <p>JK加萌站</p>
          <p>圈主「优子mily」</p>
        </div>
        <button>+加入</button>
      </div>
      <div class="b-box">
        <img
          src="../img/2.jpg"
          alt=""
        />
        <div>
          <p>吃货天堂</p>
          <p>圈主「宝藏辉太郎」</p>
        </div>
        <button>+加入</button>
      </div>
      <div class="b-box">
        <img
          src="../img/3.jpg"
          alt=""
        />
        <div>
          <p>棉花娃娃</p>
          <p>圈主「一天一朵棉花」</p>
        </div>
        <button>+加入</button>
      </div>
    </div>
    <div class="switch">
      <Button
        round
        :color="first"
        @click="
          first = '#ffc731';
          second = '#f2f2f2';
          third = '#f2f2f2';
        "
        >猜你喜欢</Button
      >
      <Button
        round
        :color="second"
        @click="
          first = '#f2f2f2';
          second = '#ffc731';
          third = '#f2f2f2';
        "
        >萌宠</Button
      >
      <Button
        round
        :color="third"
        @click="
          first = '#f2f2f2';
          second = '#f2f2f2';
          third = '#ffc731';
        "
        >四坑</Button
      >
    </div>
    <list
      v-model:loading="loading"
      :finished="finished"
      finished-text="没有更多了"
    >
      <div
        v-masonry
        transition-duration="0.3s"
        item-selector=".item"
      >
        <div
          v-masonry-tile
          class="item"
          v-for="item in hotPosts"
          :key="item.id"
        >
          <!-- 你要渲染的图片啦，文字一类的代码块 -->
          <img
            :src="item.img"
            alt=""
            style="width: 50vw; display: inline-block"
            @click="toDetail(item.id)"
          />
          <p >{{ item.content }}</p>
          <p>
            <img
              :src="
                item.uavatar
                  ? item.uavatar
                  : 'https://img1.baidu.com/it/u=789445466,168387505&fm=253&fmt=auto&app=138&f=JPEG?w=500&h=500'
              "
              alt=""
              style="
                width: 8vw;
                height: 8vw;
                display: inline-block;
                border-radius: 8vw;
              "
            />
            <span>{{ item.unickname }}</span>
            <p>
              <icon
          name="good-job-o"
          @click="postlike(item.id)"
        />
            <span>{{ item.postLike }}</span>
            </p>
          </p>
        </div>
      </div>
    </list>
  </div>
</template>
<script setup>
import {Icon, List, Button,Toast } from "vant";
import { ref } from "vue";
import { useRoute, useRouter } from "vue-router";
import { hotPostsAPI,postLikeAPI } from "../services/auth";
import {stringify} from "qs";
const router = useRouter();
const route = useRoute();
const hotPosts = ref([]);
const first = ref("#ffc731");
const second = ref("#f2f2f2");
const third = ref("#f2f2f2");
 hotPostsAPI().then((res) => (hotPosts.value = res.data));
//跳转详情页
const toDetail = (id) => {
  router.push({
    name: "Comments",
    query: {
      id,
    },
  });
};
// //点赞
 const postlike = async (pId) => {
  const res = await postLikeAPI(stringify({pId}));
  if (res.code === 200) {
    Toast.success(res.msg);
    hotPostsAPI().then((res) => (hotPosts.value = res.data));
  }else{
    Toast.success(res.msg);
    hotPostsAPI().then((res) => (hotPosts.value = res.data));
  }
}
</script>
<style scoped>
nav {
  display: flex;
  justify-content: space-around;
  align-items: center;
  margin: 12px 0;
}
.p-left {
  font-size: 22px;
  color: #cecece;
}
.p-center {
  font-size: 28px;
  font-weight: bold;
}
.p-right {
  font-size: 18px;
  font-weight: bold;
  width: 70px;
  height: 35px;
  border: 1px solid #cecece;
  text-align: center;
  line-height: 35px;
  border-radius: 20px;
}
.conten {
  display: flex;
  justify-content: space-between;
  align-items: center;
  width: 90%;
  margin: 0 auto;
  margin: 10px 0;
}
.c-p1 {
  color: gray;
  display: flex;
  align-items: center;
}
.c-p1 span {
  width: 5px;
  height: 20px;
  background-color: gray;
  display: block;
  margin-right: 8px;
}
.c-p2 a {
  color: gray;
  display: block;
}
.c-p2 a i {
  color: gray;
  margin-left: 10px;
  font-size: 20px;
}
.box {
  width: 100%;
  display: flex;
  flex-wrap: wrap;
  justify-content: space-between;
}
.b-box {
  width: 30%;
  height: 160px;
  display: flex;
  flex-direction: column;
}
.b-box img {
  width: 100%;
  border-radius: 10px 10px 0 0;
}
.b-box div {
  width: 100%;
  background-color: white;
  padding: 8px 0;
}
.b-box div p:nth-child(1) {
  font-size: 14px;
  font-weight: bold;
  text-align: center;
  margin: 0;
  padding: 0;
}
.b-box div p:nth-child(2) {
  font-size: 11px;
  text-align: center;
  margin: 0;
  padding: 0;
  color: #cecece;
  overflow: hidden;
  height: 20px;
}
button {
  border: none;
  background-color: orange;
  border-radius: 0 0 10px 10px;
}
.switch {
  margin-top: 20px;
}
.switch > .van-button {
  color: #333333 !important;
  border-radius: 20px;
}
.item{
  width: 50vw;
  padding: 0 1rem;
  box-sizing: border-box;
  margin-bottom: 1.5rem;
}
.item img {
  border-radius: 20px;
}
.item p:nth-child(2){
  width: 50vw;
  padding: 0 8vw 0 0;
  margin: 4vw  0;
  box-sizing: border-box;
}
.item p:nth-child(3) {
  display: flex;
  justify-content: space-around;
  align-items: center;
  margin: 4px 0;
}

.item p:nth-child(3) span {
  font-size: 14px;
  color: gray;
}
.item p:nth-child(3) i {
  color: #cecece;
}
</style>
